<template>
  <h2>今年：{{ age }}岁</h2>
  <h3>十年后：{{ newAge }}岁</h3>
  <button @click="age++">点击今年大一岁</button>
</template>

<script>
import { computed, ref } from 'vue'
/* 
  学习目标：掌握使用computed函数定义计算属性
  应用场景：当你需要依赖现有的响应式数据，根据一定逻辑得到一个新的数据。
*/
export default {
  name: 'App',
  setup() {
    const age = ref(18)

    // computed 函数调用后，返回的是一个响应式 ref 数据
    const newAge = computed(() => {
      return age.value + 10
    })

    // 🔔 Vue3 中带 ref 的对象都是响应式的，数据改变视图也变
    console.log('age', age) // RefImpl 响应式数据
    console.log('newAge', newAge) // ComputedRefImpl 也是响应式
    console.log('newAge.value 获取具体值', newAge.value) // 具体值

    return { age, newAge }
  },
  // Vue2 的写法回顾
  // computed: {
  //   // newAge 是一个变量名，接收函数内部返回的结果
  //   newAge() {
  //     return this.age + 10
  //   },
  // },
}
</script>